<template>
  <div>
    <div class="centered-component" v-if="this.Pet.length===0">
      <el-empty description="空空如也">
        <el-link type="primary" @click="goto()">点我去领养萌宠吧</el-link>
      </el-empty>
    </div>
    <div>
      <el-row>
        <el-col style="margin-top: 20px" v-for="(pet, index) in Pet" :key="index">
          <el-card shadow="hover">
            <div style="display: flex">
              <div>
                <div class="block">
                  <el-image :src="'http://localhost:8080/yyj/files/'+pet.image"
                            :preview-src-list="['http://localhost:8080/yyj/files/'+pet.image]"
                            style="height: 150px;width: 120px"></el-image>
                </div>
                <div class="bottom clearfix">
                  <span style="font-size: 5px">
                    {{ pet.currentTime }}
                  </span>
                </div>
              </div>
              <div>
                <el-descriptions style="margin-left :20px" title="萌宠信息">

                  <el-descriptions-item label="姓名">{{ pet.name }}</el-descriptions-item>
                  <el-descriptions-item label="品种">{{ pet.variety }}</el-descriptions-item>
                  <el-descriptions-item label="年龄">{{ pet.age }}</el-descriptions-item>
                  <el-descriptions-item label="地址">{{ pet.address }}</el-descriptions-item>
                  <el-descriptions-item label="介绍">{{ pet.description }}</el-descriptions-item>
                  <el-descriptions-item label="联系电话">{{ pet.chat }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
import request from "@/utils/request";

export default {
  name: "MyGetView",
  data() {
    return {
      Pet: [],
      user: localStorage.getItem("user") ? (JSON).parse(localStorage.getItem("user")) : {}
    };
  },
  created() {
    this.getMyPet();
  },
  methods: {
    getMyPet() {
      request.get("user/getMyAdopt/"+this.user.userId).then(res=>{
        if (res.code === '0') {
          this.Pet = res.data;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    goto() {
      this.$router.push("/homepage")
    }
  },

}
</script>

<style scoped>
.centered-component {
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
}
</style>